<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<title>我的V店</title>
		
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

			});
		</script>
	</head>
	<style>
		html,
		body {
			padding: 0;
			margin: 0;
			background: #f5f5f5;
		}
		
		.my_vtilte {
			width: 96%;
			height: 2.7rem;
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;
		}
		
		.title_left {
			position: absolute;
			top: 0;
			bottom: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		
		.title_left img {
			width: 0.5rem;
			height: 1rem;
			margin-right: 10px;
		}
		
		.title_left span {
			color: #a1a1a1;
			font-size: 0.8rem;
		}
		
		.title_type {
			width: 50%;
			height: 1.5rem;
			margin: auto;
			font-size: 0.8rem;
			border-radius: 5px;
			display: flex;
			cursor: pointer;
			/*overflow: hidden;*/
		}
		
		.title_type div {
			width: 50%;
			height: 1.5rem;
			line-height: 1.6rem;
			text-align: center;
		}
		
		.title_type div:first-child {
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			height: 1.4rem;
			line-height: 1.5rem !important;
			border: 0.1rem solid #b5b5b5;
			border-right: none;
		}
		
		.title_type div:last-child {
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			height: 1.4rem;
			line-height: 1.5rem !important;
			border: 0.1rem solid #b5b5b5;
			border-left: none;
		}
		
		.V_title_tab {
			width: 50%;
			color: #fff;
			border: 0.1rem solid #1f8ff3 !important;
			background-color: #1f8ff3;
			cursor: pointer;
		}
		
		.my_content {
			margin-bottom: 3.5rem;
		}
		
		.top_img {
			width: 100%;
			height: 10rem;
			background: pink;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-image: url(img/v_back.png);
			background-size: cover;
		}
		
		.top_img_person {
			width: 4rem;
			height: 4rem;
			border-radius: 50%;
			margin-top: 2rem;
		}
		
		.top_img span {
			font-size: 1rem;
			color: #fff;
			margin-top: 0.5rem;
		}
		
		.top_img span:last-child {
			font-size: 0.8rem;
		}
		
		.store_info {
			width: 100%;
			height: 5.5rem;
			background: #fff;
			margin-top: 0.5rem;
			display: flex;
			margin-bottom: 0.5rem;
		}
		
		.store_info_con {
			width: 50%;
			height: 100%;
		}
		
		#img_body {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 0.9rem;
			color: #484848;
		}
		
		#img_body img {
			width: 2rem;
			height: 1.5rem;
			margin-top: 1.5rem;
			margin-bottom: 0.8rem;
		}
		
		.erweima {
			height: 2rem !important;
			margin-top: 1.2rem !important;
			margin-bottom: 0.6rem !important;
		}
		
		.store_list {
			width: 100%;
			background: #fff;
		}
		
		.store_list_title {
			width: 100%;
			height: 2.5rem;
			border-bottom: 1px solid #f0f0f0;
			padding: 2% 13% 0 13%;
			box-sizing: border-box;
		}
		
		.store_list_title div {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
		}
		
		.store_list_title div span {
			width: 40%;
			height: 100%;
			line-height: 2.2rem;
			text-align: center;
			display: -moz-inline-box;
			display: inline-block;
			font-size: 0.9rem;
		}
		
		.title_choose {
			border-bottom: 2px solid #e31c1c;
			color: #e31c1c !important;
		}
		
		.store_list_con_info {
			width: 100%;
			padding: 3% 5%;
			box-sizing: border-box;
			border-bottom: 1px solid #f0f0f0;
			display: flex;
			margin-bottom: 0.5rem;
		}
		
		.info_left {
			width: 5rem;
			height: 5rem;
			margin-right: 2%;
		}
		
		.info_left img {
			width: 100%;
			height: 100%;
		}
		
		.info_right {
			width: 73%;
			height: 5rem;
		}
		
		.info_right span {
			font-size: 0.8rem;
			color: #707070;
		}
		
		.info_right_bottom {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		
		.bottom_left {}
		
		.bottom_right {
			display: flex;
			align-items: center;
		}
		
		.bottom_right div {
			width: 3rem;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.bottom_right div img {
			width: 1.5rem;
			height: 1.5rem;
		}
		
		.V_weixin {
			width: 2rem !important;
			height: 1.5rem;
		}
		
		.V_bottom {
			width: 100%;
			height: 3rem;
			position: fixed;
			bottom: 0;
			background: #fff;
			border-top: 1px solid #707070;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.V_bottom_con {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 0.8rem;
		}
		
		.V_bottom img {
			margin-right: 1rem;
			width: 2rem;
			height: 2rem;
		}
		.V_buy_img{
			width: 4rem;
			height: 4rem;
			border-radius: 50%;
			margin-top: 2rem;
		}
		.buy_vip{
			width: 1.3rem;
			height: 1.3rem;
			position: absolute;
			margin: auto;
			top: 4.7rem;
			left: 14.5%;
			right: 0;
		}
			.top_img_b {
			width: 100%;
			height: 10rem;
			background: pink;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-image: url(img/v_back.png);
			background-size: cover;
			position: relative !important;
			margin-bottom: 1rem;
		}
		
		.top_img_b span {
			font-size: 1rem;
			color: #fff;
			margin-top: 0.5rem;
		}
		
		.top_img_b span:last-child {
			font-size: 0.8rem;
		}
		.buy_type{
			width: 100%;
			height: 2.5rem;
			line-height: 2.5rem;
			background: #fff;
			padding:0 5%;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 0.8rem;
			margin-bottom: 0.5rem;
		}
		.buy_type img:first-child{
			width: 1.4rem;
			height: 1.4rem;
			margin-right:0.8rem;
		}
		.buy_type img:last-child{
			width: 0.6rem;
			height: 1rem;
			
		}
		.buy_type div{
			height: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.buy_type span{
			height: 2.5rem;
			line-height: 2.5rem;
			display: -moz-inline-box;
			display: inline-block;
			/*border: 0.1rem solid red;*/
		}
		
	</style>
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('.title_type div').click(function() {
				$(this).addClass("V_title_tab").siblings().removeClass(); //removeClass就是删除当前其他类；只有当前对象有addClass("selected")；siblings()意思就是当前对象的同级元素，removeClass就是删除；
				var n = $(this).index();
				console.log(n,898);
				$(".my_content_all>div").show();
				$(".my_content_all>div").eq(n).hide();
				if(n==1){
				
				$(".V_bottom").show();
			}else{
				$(".V_bottom").hide();
			}
			});
			$(".my_content_all>div").eq(1).hide();
		});
	</script>

	<body>
		<!--顶部-->
		<div class="my_vtilte">
			<div class="title_left">
				<img src="img/return_left.png" />
				<span>返回</span>
			</div>
			<div class="title_type">
				<div>我是买家</div>
				<div class="V_title_tab">我是卖家</div>
			</div>

		</div>
		<!--内容-->
		<div class="my_content_all">
			<div class="my_content" id="my_content">
				<div class="top_img">
					<img class="top_img_person" src="img/v_person.png" />
					<span>钱小平的V店</span>
					<span>高品质低廉价格生活用品，正品价格保正，全国保证</span>
				</div>

				<div class="store_info">
					<div class="store_info_con">
						<div id="img_body">
							<img src="img/V_store.png" />
							<span>店铺预览</span>
						</div>
					</div>
					<div class="store_info_con">
						<div id="img_body">
							<img class="erweima" src="img/V_erweima.png" />
							<span>店铺二维码</span>
						</div>
					</div>
				</div>
				<div class="store_list">

					<div class="store_list_title">
						<div>
							<span class="title_choose" onclick="changeTab(this)">商品预约</span>
							<span>我的商品</span>
						</div>
					</div>
					<div class="store_list_con">
						<div class="store_list_con_info">
							<div class="info_left">
								<img src="img/V_storelist.png" />
							</div>
							<div class="info_right">
								<span>爱生活500ml洋甘菊泡沫洗手液（9.9元+5元优惠券）</span>
								<div class="info_right_bottom">
									<div class="bottom_left">
										<span>￥15.00</span>
										<br />
										<span>100人咨询</span>
									</div>
									<div class="bottom_right">
										<div style="border-right: 1px solid #484848;">
											<img src="img/V_phone.png" />
										</div>

										<div>
											<img class="V_weixin" src="img/V_weixin.png" />
										</div>

									</div>
								</div>
							</div>
						</div>

						<div class="store_list_con_info">
							<div class="info_left">
								<img src="img/V_storelist.png" />
							</div>
							<div class="info_right">
								<span>爱生活500ml洋甘菊泡沫洗手液（9.9元+5元优惠券）</span>
								<div class="info_right_bottom">
									<div class="bottom_left">
										<span>￥15.00</span>
										<br />
										<span>100人咨询</span>
									</div>
									<div class="bottom_right">
										<div style="border-right: 1px solid #484848;">
											<img src="img/V_phone.png" />
										</div>

										<div>
											<img class="V_weixin" src="img/V_weixin.png" />
										</div>

									</div>
								</div>
							</div>
						</div>

						<div class="store_list_con_info">
							<div class="info_left">
								<img src="img/V_storelist.png" />
							</div>
							<div class="info_right">
								<span>爱生活500ml洋甘菊泡沫洗手液（9.9元+5元优惠券）</span>
								<div class="info_right_bottom">
									<div class="bottom_left">
										<span>￥15.00</span>
										<br />
										<span>100人咨询</span>
									</div>
									<div class="bottom_right">
										<div style="border-right: 1px solid #484848;">
											<img src="img/V_phone.png" />
										</div>

										<div>
											<img class="V_weixin" src="img/V_weixin.png" />
										</div>

									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>

			<!--内容二-->
			<div class="my_content ">
				<div class="top_img_b">
					<img class="V_buy_img" src="img/v_person.png"  />
					<img class="buy_vip" src="img/buy_vip.png"/>
					<span>钱小平的V店</span>
					<span>高品质低廉价格生活用品，正品价格保正，全国保证</span>
				</div>
				<div class="buy_type">
					<div >
						<img src="img/v_yuyue.png"/>
						<span>我的预约</span>
					</div>
					<img src="img/v_right.png" />
				</div>
				<div class="buy_type">
					<div >
						<img src="img/v_money.png"/>
						<span>我的钱包</span>
					</div>
					<img src="img/v_right.png" />
				</div>
				<div class="buy_type">
					<div >
						<img src="img/v_love.png"/>
						<span>我的收藏</span>
					</div>
					<img src="img/v_right.png" />
				</div>



			</div>
		</div>
		<!--底部-->
	<div class="V_bottom">
			<div class="V_bottom_con">
				<img src="img/V_add.png" />

				<div>添加新商品</div>

			</div>
		</div>
	
	</body>

</html>